<script setup lang="ts">
import { reactive, onMounted } from "vue"// 替换ref为onMounted（初始化调用接口）
import request from "@/utils/request.ts"
import { ElMessage } from "element-plus"

const data = reactive({
  calssification: [], // 存储分类列表
  user: JSON.parse(localStorage.getItem("code_user") || "{}"),
})
onMounted(() => {
  selectAllClassification()
})
function selectAllClassification() {
  request.get(`/classification/${data.user.userid}`).then(res => {
    console.log(res)
    if (res.status === '200') {
      data.calssification = res.data
      console.log(data.calssification)
    } else {
      ElMessage.error(res.data?.msg || "分类列表加载失败，请重试")
    }
  }).catch(err => {
    ElMessage.error("网络错误，无法加载分类列表")
    console.error("接口请求错误：", err)
  })
}
</script>

<template>
  <div class="card-list-container">
    <el-card
        class="data-card"
        shadow="hover"
        v-for="(item, index) in data.calssification"
        :key="index"
    >
        <h3 class="classification-name"> {{ item.classification}}</h3>
    </el-card>
  </div>
</template>

<style scoped>
.card-list-container {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px; /* 卡片间距，优化布局 */
  margin-bottom: 50px;
}

.data-card {
  height: 300px;
  transition: transform 0.2s; /*  hover时轻微上浮，提升体验 */
  background-image: url("../assets/images/cf_bg.jpg");
  background-size: cover;
}
.data-card:hover {
  transform: translateY(-5px);
  color: #248243;
}
.classification-name{
  font-size: 18px;
  writing-mode: vertical-rl;
  text-align: center;
  line-height: 1.5;
}
/* 无数据提示样式 */
.empty-tip {
  grid-column: 1 / -1; /* 占满所有列，居中显示 */
  text-align: center;
  padding: 50px 0;
  color: #999;
  font-size: 14px;
  background: #f9fafc;
  border-radius: 8px;
}
</style>